<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 动态绑定属性 -->
        <a v-bind:href="uhref">
            <!-- v-bind的一个简写，省略v-bind，用冒号代替 : -->
            <img :src="url" >
        </a>
        <ul>
            <li v-for="item in imgurl">
                <!-- 错误写法： 不能使用{{}} 语法 -->
					<!-- <img :src="{{item}}" >			 -->
                <!-- <img :src="'{{}}'"> -->
                <img :src="item">
            </li>
        </ul>
    </div>
    
    <!-- 创建vue实例 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                uhref:"https://www.baidu.com",
                url:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
                imgurl:[
                    "https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-2020-06-29-zh.jpg",
                    "https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/starbucks-design-studio-web-china.jpg",
                    "https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/homepage-career-cn.jpg",
                ]
            }
        });
    </script>
</body>
</html>